<template>
    <div class="drawerBox">
        <div class="clip-tools_pan">
            抽屉功能操作
        </div>
        <div class='clip-tools_body' id="profileBody">
            <div>单层抽出：</div>
            <div v-for='(item, index) in storeyDatas' :key="index">
                <label>{{ item.name }}</label>
                <div class='profile-item-range'>
                    <input type='range' :id='item.name' value="0" min="0" max="100">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "drawer",
        props:["currentTool","storeyDatas"],
        methods:{
            drawer: function() {
                if(this.storeyDatas.length === 0) {
                    let keys = Object.keys(GOLOAlBAL_OPEOBJ.storeyDatas);
                    keys.forEach(item => {
                        this.storeyDatas.push({name: item})
                    })
                }

                let profileBodyDom = document.getElementById('profileBody');
                profileBodyDom.addEventListener('input', function(e) {
                    if(e.target.type === 'range') {
                        let name = e.target.getAttribute('id');
                        let oldValue = e.target.getAttribute('old-val');
                        if(!oldValue) {
                            oldValue = 0;
                        }
                        let nowValue = e.target.value;

                        let diffValue = nowValue - oldValue;
                        let meshArr = GOLOAlBAL_OPEOBJ.storeyDatas[name]
                        for(let i = 0; i < meshArr.length; i++) {
                            GOLOAlBAL_OPEOBJ.bimModel.objects[meshArr[i].guid].translateZ(diffValue);
                        }
                        oldValue = nowValue;
                        e.target.setAttribute('old-val', oldValue);
                    }
                })
            },
        },
        watch:{
            currentTool:{
                handler(newValue, oldValue) {
                    console.log("ddd")
                    console.log(newValue);
                    console.log(oldValue);
                },
                deep: true
            }
        },
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        mounted(){
            this.drawer();
        },
        beforeUpdate(){

        },
        updated(){

        },
        beforeDestroy(){

        },
        destroyed(){

        }
    }
</script>

<style scoped>
    @import "./css/drawer.css";
</style>